﻿.modal {
    &-sm {
        @media (min-width: 576px) {
            width: 300px;
        }
    }

    &-lg {
        @media (min-width: 992px) {
            width: 800px;
        }
    }

    &-xl {
        @media (min-width: 1200px) {
            width: 1140px;
        }
    }

    .modal-content.modal-fullscreen {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        margin: 0;
        background-color: #fff;
    }

    &.is-active.fade {
        animation-duration: var(--modal-animation-duration, 300ms);
        animation-fill-mode: both;
        animation-name: fadeIn;
    }
}
